<template>
  <div class="login-container">
    <!-- logo区域 -->
    <div class="logo">
      <img src="../../../assets/logo.jpg" alt="">
    </div>

    <!-- 手机注册表单区域 -->
    <!-- 手机注册的表单 -->
    <el-form :model="userInfo" ref="userInfo" label-width="0px" class="loginform_style">
      <el-form-item prop="mobile">
        <el-input v-model="userInfo.mobile" prefix-icon="el-icon-user-solid" placeholder="输入您的手机号"></el-input>
      </el-form-item>

      <el-form-item prop="verification">
        <el-input type="text"  v-model="userInfo.verification" prefix-icon="el-icon-s-help" placeholder="输入您的验证码"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button @click="getYzm">获取验证码</el-button>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" @click="toRegister">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "Register",
        data(){
            return{
                userInfo:{
                    mobile:'',
                    verification:'',
                }
            }
        },
        methods:{
            toRegister:function () {
                this.$http.post('/member/phoneRegister?mobile='+this.userInfo.mobile+'&verification='+this.userInfo.verification).then((res)=>{
                    if(res.data.success){

                        this.$router.push("/memberLogin");
                        this.$message.success(res.data.message);
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            },
            getYzm:function () {
                this.$http.post("/member/getVerification?mobile="+this.userInfo.mobile).then((res)=>{
                    this.verification=res.data.result.verification
                    alert(res.data.result.verification)
                })
            },
        }
    }
</script>

<style scoped lang="less">
  .login-container {
    width: 450px;
    height: 354px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

    .logo {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 0 10px #eee;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-60px);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .loginform_style {
      padding: 0 20px;
      margin-top: 110px;
    }

    .btns {
      display: flex;
      justify-content: center;
    }
  }

</style>
